<template>
    <!-- 侧边菜单栏 -->
    <el-menu 
        default-active="1-4-1" 
        class="el-menu-vertical-demo" 
        :collapse="isCollapse"

        background-color="#3f6e91"
        text-color="#fff"
        active-text-color="#ffd04b"
        >

        <!-- 首页菜单，直接固定写死 -->
        <el-menu-item index="1" @click="changMenuMain({path:'firsthome',label:'首页'})">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
        </el-menu-item>

        <!-- 其他多级菜单,根据服务器返回的数据来决定 -->
        <el-submenu 
            v-for="item in menuList" 
            :key="item.name" 
            :index="item.name"
            >
            <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{item.label}}</span>
            </template>
            <!-- 多级菜单下的子目录，同样根据服务器返回的数据来决定 -->
            <el-menu-item 
                v-for="child in item.children" 
                :key="child.name" 
                :index="child.name"
                @click="changMenuMain(child)"                      
                >
                {{ child.label }}
            </el-menu-item>
        </el-submenu>

    </el-menu>
</template>

<script>
    import {mapState} from 'vuex';
    export default {
        name:'Aside',
        data() {
            return {
                
            };
        },
        computed:{
            // 从vuex中获取menuList数据
            menuList(){
                return this.$store.state.Aside.menuList;
            },
            // 获取是否折叠菜单栏属性
            ...mapState('Aside',['isCollapse']),
        },
        methods: {
            // 点击菜单按钮切换不同的子组件
            changMenuMain(item){
                if('/home/'+item.path !== this.$route.path){
                    // this.$bus.$emit('updateLoading',true);       // 加载动画

                    this.$store.commit('Tabs/ADD_TAB',item);     // 面包屑数据
                    this.$router.push({path:item.path});         // 路由切换
                }
            }
        },
        beforeCreate(){
            // 获取侧边栏的数据
            this.$store.dispatch("Aside/getMenuList");
        }
    }
</script>

<style lang="less" scoped>
    // 菜单栏收缩动画 
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .el-menu{
    height: 100vh;
    border: none;
  }
</style>